<template>
    <div class="buy-ticket">
        <div class="nav">
            <div class="back" @click.stop="$router.back()">
                <i class="iconfont icon-fanhui"></i>
            </div>
            <h1 v-if="cinema">{{cinema.nm}}</h1>
        </div>
        <div class="th" v-if="lis">
            <!-- {{lis.th}} -->
            <div class="screen">{{lis.th}}</div>
        </div>
        <div class="seat" v-if="cinema && movie">
            <ul>
                <li v-for="(r,row) in seatsArr" :key="row">
                    <template v-for="(value,column) in r">
                        <i :key="column+Math.random()" :data-row="row" :data-column="column" :class="[`seats-${value}`]" @click.stop="chooseSeat(row,column,value)"></i>
                    </template>
                </li>
            </ul>
        </div>
        <div class="footer" v-if="cinema && movie">
            <div class="seatMess" v-if="select.length>0">
                <p class="title">选座信息:</p>
                <div>
                    <p v-for="ms in seatMsg" :key="ms.row+Math.random()">
                        {{ms.row>1?ms.row:ms.row+1}}排{{ms.column+1}}座
                    </p>
                </div>
            </div>
            <div class="tips">
                <div class="choosable">
                    <i class="seats-1"></i>
                    <span>可选</span>
                </div>
                <div class="sold">
                    <i class="seats-2"></i>
                    <span>已选</span>
                </div>
                <div class="selected">
                    <i class="seats-3"></i>
                    <span>已售</span>
                </div>
            </div>
            <div class="notice">
                <div class="not-bar">
                    <div class="bar">
                        <van-notice-bar left-icon="volume" :scrollable="false" background="#fff" color="#333">
                            <van-swipe
                                vertical
                                class="notice-swipe"
                                :autoplay="3000"
                                :show-indicators="false"
                            >
                                <template v-for="item in cinema.featureTags">
                                    <van-swipe-item :key="item.tag" v-if="cinema">{{item.desc}}</van-swipe-item>
                                </template>
                            </van-swipe>
                            </van-notice-bar>
                    </div>
                    
                    <div class="all">
                        <!-- <span>{{cinema.featureTags.length}}</span>
                        <span>个通知</span>
                        <i class="iconfont icon-xiangyoujiantou-1"></i> -->
                        <van-popover v-model="showPopover" trigger="click" placement="top-end">
                            <template v-for="item in cinema.featureTags">
                                <van-cell :key="item.tag" v-if="cinema">
                                    <template #default>
                                        <van-tag plain :color="item.color">{{item.tag}}</van-tag>
                                        <span>{{item.desc}}</span>
                                    </template>
                                </van-cell>
                                <!-- <div :key="item.tag">
                                    <van-tag plain :color="item.color">{{item.tag}}</van-tag>
                                    <span>{{item.desc}}</span>
                                </div> -->
                            </template>
                            <template #reference>
                                <div class="all">
                                <span>{{cinema.featureTags.length}}</span>
                                <span>个通知</span>
                                <i class="iconfont icon-xiangyoujiantou-1"></i>
                            </div>
                            </template>
                        </van-popover>
                    </div>
                </div>

                <div class="message" v-if="movie">
                    <h2>
                        {{movie.nm}}
                    </h2>
                    <p>
                        <span>{{lis.dt|filDate}}</span>
                        <span>{{lis.tm}}-{{timeover}}</span>
                        <span>{{lis.lang}}{{lis.tp}}</span>
                    </p>
                </div>
            </div>
            <div class="btn">
                <div :class="[select.length>0?'bl':'']" @click.stop="pay">
                    {{select.length>0?"购买":"请先选座"}}
                </div>
            </div>
            <van-dialog v-model="show" title="请选择支付方式" show-cancel-button confirm-button-text="确认支付" confirm-button-color="#4fc08d" cancel-button-color="#ee0a24" @confirm="confirm" @cancel="cancel">
                <van-radio-group v-model="radio">
                    <van-cell-group>
                        <van-cell title="微信支付" clickable @click="radio = '1'" icon="wechat">
                            <template #right-icon>
                                <van-radio name="1" />
                            </template>
                        </van-cell>
                        <van-cell title="支付宝" clickable @click="radio = '2'" icon="alipay">
                            <template #right-icon>
                                <van-radio name="2" />
                            </template>
                        </van-cell>
                        <van-cell title="零钱" clickable @click="radio = '3'" icon="balance-pay">
                            <template #right-icon>
                                <van-radio name="3" />
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-radio-group>
            </van-dialog> 
        </div>
    </div>
</template>

<script>
import { mapGetters,mapMutations } from "vuex";
import _ from 'lodash';

export default {
    props:['cinema','lis','movie'],
    data(){
        return {
            seatsArr : [
            [0,0,1,1,1,1,1,1,1,1,1,1,1,0,0],
            [0,0,1,3,3,3,3,3,3,3,3,3,1,0,0],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            [0,0,1,1,1,1,3,3,3,1,1,1,1,0,0],
            [0,0,1,1,1,1,1,1,1,1,1,1,1,0,0],
            [0,0,1,1,1,1,1,1,1,1,1,1,1,0,0],
            [0,0,1,1,3,3,1,1,1,3,3,1,1,0,0],
            [0,0,1,1,3,3,1,1,3,1,1,1,1,0,0],
            [1,0,1,1,1,3,3,3,3,3,1,1,1,0,1],
            [1,1,1,1,1,1,1,1,3,3,3,1,1,1,1],
            ],
            showPopover: false,
            select:[],
            seatMsg:[],
            show: false,
            value1:0,
            option1: [
                { text: '微信支付', value: 0 , icon: "wechat"},
                { text: '支付宝', value: 1 , icon: "alipay"},
                { text: '零钱', value: 2 , icon: "card"},
            ],
            radio:"1",
            xb:0,
            count:0,
        }
    },
    created(){
        this.seatMessage.forEach(item=>{
            if(item.cn == this.cinema.nm && item.mn == this.movie.nm && item.tm == this.lis.tm){
                this.seatsArr=[...item.seatsArr];
            }
        });
    },
    beforeRouterLeave(to,from,next){
        this.select=[];
        this.seatMsg=[];
        next();
    },
    methods:{
        ...mapMutations(['buy','saveTicket']),
        chooseSeat(row,column,value){
            if(value==3||value==0){
                return;
            }else{
                if(value==1){
                    let arr=this.seatsArr[row];
                    arr.splice(column,1,2);
                    this.seatsArr.splice(row,1,arr);
                    let a=this.select;
                    a.push({
                        row:row,
                        column:column,
                    });
                    let b=_.sortBy(a,['row', 'column']);
                    this.select=b;
                }else{
                    let arr=this.seatsArr[row];
                    arr.splice(column,1,1);
                    this.seatsArr.splice(row,1,arr);
                    let c=this.select;
                    c.forEach((item,index) => {
                        if(item.row==row && item.column==column){
                            this.select.splice(index,1);
                        }
                    });
                }
                let q=[...this.select];
                this.select.forEach((item,index) =>{
                    let b=this.seatsArr[item.row];
                    this.xb=item.column;
                    let e=item.column;
                    this.count=0;
                    for(let i=e;i>0;i--){
                        let c=b.lastIndexOf( 0 , this.xb-1);
                        if(c !== -1 && c<e){
                            this.count++;
                            this.xb=c;
                        }
                    }
                    q.splice(index,1,{
                        row:item.row,
                        column:item.column-this.count,
                    })
                });
                this.seatMsg=q;
            }
        },
        pay(){
            if(this.select.length>0){
                this.show=true;
            }else{
                this.$toast({
                    message:'请先选择座位',
                    duration:1500,
                    icon:'fail',
                });
            }
        },
        confirm(){
            let a=this.seatsArr;
            a.forEach((item,index) =>{
                this.select.forEach( ele =>{
                    if(index == ele.row ){
                        this.seatsArr[index].splice(ele.column,1,3);
                    }
                })
            });
            let b=[...this.seatMsg];
            let c=[];
            let date=Date.now();
            b.forEach(item=>{
                if(item.row>1){
                    c.push({
                        row:item.row,
                        column:item.column+1,
                    })
                }else{
                    c.push({
                        row:item.row+1,
                        column:item.column+1,
                    })
                }
            });
            this.$store.commit('saveTicket',{
                ticket:c,
                cn:this.cinema.nm,
                mn:this.movie.nm,
                dt:this.lis.dt,
                tm:this.lis.tm,
                img:this.movie.img,
                orderTime:date,
            });
            this.select=[];
            this.seatMsg=[];
            this.$store.commit("buy",{
                seatsArr:this.seatsArr,
                cn:this.cinema.nm,
                mn:this.movie.nm,
                tm:this.lis.tm,
            });
            this.$toast({
                message:'支付成功',
                duration:1500,
                icon:'passed',
            });
        },
        cancel(){
            this.$toast({
                message:'已取消支付',
                duration:1500,
                icon:'fail',
            });
        },
    },
    computed:{
        ...mapGetters(['seatMessage']),
        timeover(){
            let time=this.lis.tm;
            let h=Number(time.split(':')[0]);
            let s=Number(time.split(':')[1]);
            let th=parseInt(this.movie.dur/60);
            let ts=this.movie.dur-(th*60);
            let sumSec=s+ts;
            let sumHours=h+th;
            if(sumSec>=60){
                sumSec=sumSec-60;
                sumHours+=1;
                if(sumHours>=24){
                    sumHours=sumHours-24;
                }
            }
            sumSec=sumSec>9?sumSec:'0'+sumSec;
            sumHours=sumHours>9?sumHours:'0'+sumHours;
            return sumHours+':'+sumSec;
        },
    },
    filters:{
        filDate(text){
            let now=new Date();
            let date=new Date(text);
            let m=date.getMonth()+1;
            let d=date.getDate();
            let week=['周日','周一','周二','周三','周四','周五','周六'];
            if(date.getDay()-now.getDay()==0){
                return '今天'+m+'月'+d+'日';
            }else if(date.getDay()-now.getDay()==1){
                return '明天'+m+'月'+d+'日';
            }else{
                return week[date.getDay()]+m+'月'+d+'日';
            }
        },
    },
}
</script>

<style lang="less">
.buy-ticket{
    height: 100vh;
    background-color: #e6e6e6;

    .nav{
        background-color: #e54847;
        padding: 6px;
        height: 38px;
        line-height: 38px;
        color: #fff;
        text-align: center;
        font-size: 18px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: relative;

        .back{
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);

            i{
                font-size: 20px;
            }
        }
    }

    .th{
        width: 180px;
        height: 20px;
        padding-top: 10px;
        margin: 0 auto;
        text-align: center;
        position: relative;
        line-height: 20px;
        color: #555;
        font-size: 14px;
        // z-index: 1;

        &::before{
            content: "";
            width: 140px;
            position: absolute;
            left: 0;
            top: 10px;
            border: 20px solid transparent;
            border-top-color: #ccc;
            z-index: 0;
        }

        .screen{
            width: 180px;
            position: absolute;
            left: 0;
            top: 10px;
        //     border: 20px solid transparent;
        //     border-top-color: #ccc;
        //     z-index: -1;
        }
    }

    .seat{
        ul{
            padding-top: 30px;

            li{
                display: flex;
                justify-content: center;
                flex-wrap: nowrap;

                i{
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    background: url(../assets/seats.png) no-repeat;
                    background-size: 20px 60px;

                    &:not(:last-child){
                        margin-right: 4px;
                    }

                    &.seats-0{
                        background: none;
                    }

                    &.seats-1{
                        background-position: 0 0;
                    }

                    &.seats-2{
                        background-position: 0 -20px;
                    }

                    &.seats-3{
                        background-position: 0 -40px;
                    }
                }
            }
        }
    }

    .footer{
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        .seatMess{
            width: 90%;
            padding: 5px 10px;
            background-color: #fff;
            border-radius: 10px;

            .title{
                font-size: 15px;
                color: #333;
                line-height: 25px;
            }

            div{
                width: 100%;
                display: flex;
                overflow-x: scroll;
                font-size: 14px;
                color: #555;
                line-height: 25px;
                
                &::-webkit-scrollbar{
                    display: none;
                }

                p{
                    width: 65px;
                    text-align: center;
                    white-space: nowrap;

                    &:not(:last-child){
                        margin-right: 10px;
                    }
                }
            }
        }

        .tips{
            display: flex;
            width: 90%;
            padding: 0 10px;
            font-size: 12px;
            color: #333;
            justify-content: center;
            height: 40px;
            font-weight: 600;
            align-items: center;

            div:not(:last-child){
                margin-right: 15px;
            }

            i{
                display: inline-block;
                width: 20px;
                height: 20px;
                background: url(../assets/seats.png) no-repeat;
                background-size: 20px 60px;
                vertical-align: sub;
                margin-right: 3px;

                &.seats-1{
                    background-position: 0 0;
                }

                &.seats-2{
                    background-position: 0 -20px;
                }

                &.seats-3{
                    background-position: 0 -40px;
                }
            }
        }

        .notice{
            width: 90%;
            border-radius: 5px;
            padding: 5px 10px;
            background-color: #fff;

            .not-bar{
                height: 30px;
                display: flex;
                align-items: center;
                font-size: 12px;
                color: #333;
                position: relative;

                &::after{
                    content: "";
                    width: 100%;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    border-bottom: 1px solid #eee;
                }

                .bar{
                    flex: 1;
                }

                .van-notice-bar{
                    height: 20px;
                    padding: 0;
                }

                .van-notice-bar__left-icon{
                    color: #fd9512;
                }

                .van-swipe-item{
                    font-size: 12px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .notice-swipe {
                    height: 20px;
                    line-height: 20px;
                }

                .all{
                    margin-left: 5px;
                    height: 30px;
                    line-height: 30px;

                    i{
                        font-size: 13px;
                        color: #333;
                        padding-left: 3px;
                    }

                }
            }

            .message{
                padding: 13px 0;

                h2{
                    font-size: 16px;
                    color: #333;
                    margin-bottom: 8px;
                    font-weight: 600;
                }

                span{
                    font-size: 13px;
                    color: #666;

                    &:not(:last-child){
                        margin-right: 7px;
                    }
                }
            }
        }

        .btn{
            width: 95.33%;
            padding: 10px 0 20px;

            div{
                width: 100%;
                height: 40px;
                background-image: linear-gradient(90deg,#ff990d,#ff7d15);
                border-radius: 40px;
                line-height: 40px;
                text-align: center;
                color: rgba(255,255,255,.4);

                &.bl{
                    color: #fff;
                }
            }
        }

    }

}
.van-popover__content{
    .van-cell{
        font-size: 13px;
        color: #333;
        line-height: 18px;

        .van-tag{
            margin-right: 3px;
        }
    }
}
.van-popup.van-popover{
    width: 100%;
    left: 0 !important;
}
</style>